<template>
  <div class="mall-sort">
    <ul class="mall-list">
      <li
        v-for="mallSort in mallSorts"
        :key="mallSort.id"
        tag="li"
        is="router-link"
        :to="{ name: 'GoodsList', params: { url: mallSort.url } }"
      >
        <img :src="mallSort.imageUrl" />
        <span>{{ mallSort.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MallSort",
  data() {
    return {
      mallSorts: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$http.getMallSort(to.params.id).then(resp => {
        vm.mallSorts = resp.categories;
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.$http.getMallSort(to.params.id).then(resp => {
      this.mallSorts = resp.categories;
    });
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  }
};
</script>

<style lang="scss" scoped>
.mall-sort {
  height: 100%;
  background: #f2f2ff;
  .mall-list {
    padding: 0 5px;
    display: flex;
    flex-wrap: wrap;
    background: #f2f2f2;
    justify-content: space-between;
    li {
      width: 48%;
      background: #fff;
      border: 1px solid #eee;
      text-align: center;
      color: #666;
      margin-bottom: 10px;

      img {
        width: 100%;
      }

      span {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>
